<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频观看</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/dplayer/1.25.0/DPlayer.min.css">
    <script src="https://cdn.staticfile.org/hls.js/8.0.0-beta.3/hls.min.js"></script>
    <script src="https://cdn.staticfile.org/dplayer/1.25.0/DPlayer.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>

<style>
    .video {
        margin-top: 20px;
        height: 55%;
        width: auto;
    }
</style>
<body>
<div id="video-name" style="text-align: center; margin-top: 50px;">标题</div>
<div>
    <div class="player video" id="player">视频播放</div>
</div>
</body>

<script>
    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return "";
    }

    let data = {
        url: "http://cdn-01.zsyg8888.com/media/upload-video/87b/87b484439718002468be97c549ae4372/m3u8/index.m3u8?_v=20200604",
        pic: "http://tp.jializyw.com/upload/vod/20200719-1/a0ea1ece3c5e85a3933c605264f42514.jpg"
    };

    $(function () {

        let videoUrl = getQueryVariable("url");
        if (videoUrl === undefined || videoUrl === ""){
            videoUrl = data.url;
        }
        $("#video-name").text("自用");
        let num = '100';
        let dp = new DPlayer({
            element: document.getElementById('player'),
            autoplay: true,
            video: {
                url: videoUrl,
                pic: data.pic
            },
            highlight: [
                {
                    time: num === 0 ? 60 : 0,
                    text: '次数用完只能播放60秒',
                },
            ],
        });
    });
</script>
</html>
